<template>
  <v-layout type="main">
    <div class="detail-layout">
      <el-form class="form myself-form alick-add-form" ref="form" :model="addForm" :rules="submitRules" label-width="120px">
        <div v-show="active == 1">
          <h3 class="add-alike-title">版本信息</h3>
          <el-form-item label="版本" prop="version">
            <el-input type="text" v-model="addForm.version" readonly />
          </el-form-item>
          <el-form-item label="提交信息" prop="commit_msg">
            <el-input type="textarea" :rows="3" v-model="addForm.commit_msg" />
          </el-form-item>

          <h3 class="add-alike-title">开发环境配置</h3>
          <div class="node-module">
            <h4 class="node-module-title">主节点</h4>
            <el-form-item label="环境" prop="mainImage">
              <el-cascader v-model="mainNode.image_group" :options="imageOptions"
                :show-all-levels="false" size="mini" class="full-extent-select"></el-cascader>
            </el-form-item>
            <el-form-item label="资源组"  prop="mainProduct">
              <el-select size="mini" v-model="mainNode.product_id" class="full-extent-select">
                <el-option v-for="item in productOptions" :value="item.id" :label="item.name" :key="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="启动命令行" prop="mainCommand">
              <el-input type="textarea" :rows="2" v-model="mainNode.command" />
            </el-form-item>
            <!-- <el-form-item label="数量">
              <el-input-number size="mini" v-model="addForm.podNum"></el-input-number>
            </el-form-item> -->
            <div class="right-btn-box" v-if="slaveNodeList.length == 0">
              <span class="outin-handle">
                <a href="javascript:;" @click="addSlaveNode()">增加</a>
              </span>
            </div>
          </div>
          <div v-for="(tag, i) in slaveNodeList" :key="i">
            <div class="node-module">
              <h4 class="node-module-title">从节点</h4>
              <el-form-item label="环境" prop="slaveImage">
                <el-cascader v-model="tag.image_group" :options="imageOptions" :show-all-levels="false" size="mini" class="full-extent-select"></el-cascader>
              </el-form-item>
              <el-form-item label="资源组"  prop="slaveProduct">
                <el-select size="mini" v-model="tag.product_id" class="full-extent-select">
                  <el-option v-for="item in productOptions" :value="item.id" :label="item.name" :key="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="数量">
                <el-input-number size="mini" v-model="tag.pod_num"></el-input-number>
              </el-form-item>
              <el-form-item label="启动命令行" prop="slaveCommand">
                <el-input type="textarea" :rows="2" v-model="tag.command" />
              </el-form-item>
              <div class="right-btn-box">
                <span class="outin-handle">
                  <a href="javascript:;" @click="delSlaveNode(i)">删除</a>
                  <a href="javascript:;" @click="addSlaveNode()" v-if="i == slaveNodeList.length - 1">增加</a>
                </span>
              </div>
            </div>
          </div>
          <div v-if="advanced == true">
            <h3 class="add-alike-title">输入配置 </h3>
            <el-form-item label="数据集">
              <plug-dataset :dataset_list="dataset_list" @infoDataset="infoDataset" v-if="dataset_list" />
            </el-form-item>
            <el-form-item label="S3输入">
              <plug-s3 :s3_list="in_s3_list" @infoS3="infoInS3" v-if="in_s3_list" />
            </el-form-item>
            <el-form-item label="预训练模型">
              <plug-model :model_list="model_list" @infoModel="infoModel" v-if="model_list" />
            </el-form-item>
            <el-form-item label="超参">
              <plug-parameter :parameter_list="parameter_list" @infoParameter="infoParameter" v-if="model_list" />
            </el-form-item>
            <h3 class="add-alike-title">输出配置 </h3>
            <el-form-item label="S3输出">
              <plug-s3 :s3_list="out_s3_list" @infoS3="infoOutS3" v-if="out_s3_list" />
            </el-form-item>
            <el-form-item label="端口映射">
              <plug-port :port_list="port_list" @infoPort="infoPort" v-if="port_list" />
            </el-form-item>
          </div>
          <div class="right-btn-box">
            <span class="outin-handle">
              <a href="javascript:;" @click="setAdvanced()">高级设置</a>
            </span>
          </div>
        </div>
        <div v-show="active == 2">
          <h3>
            <p class="succeed-hint">创建成功</p>
          </h3>
          <div class="succeed-btn">
            <a href="javascript:;" class="start" @click="startTask">启动</a>
            <a href="javascript:;" class="go" @click="toDetail">立即前往</a>
          </div>
        </div>
        <el-form-item label=" ">
          <el-button class="none-type" v-if="active == 1" type="primary" @click="addTaskOrVersion">下一步</el-button>
        </el-form-item>

      </el-form>
    </div>

  </v-layout>
</template>

<script>
import { getImageDetail, getAllImageGroups } from '@/api/image'
import plugDataset from '@/components/module/plug-in-dataset'
import plugS3 from '@/components/module/plug-in-s3'
import plugModel from '@/components/module/plug-in-model'
import plugPort from '@/components/module/plug-in-port'
import plugParameter from '@/components/module/plug-in-parameter'
import { getAllProducts } from '@/api/product'
import { getAllTaskVersions} from '@/api/task'
import { addTaskVersion, startTaskVersion ,getTaskVersionDetail} from '@/api/task'
import { mainImageRule, mainProductRule, mainCommandRule } from '@/utils/rule'
export default {
  data() {
    return {
      advanced: false,
      addForm: {
        name: '',
        desc: '',
        version: 'v1'
      },
      active: 1,
      dataset_list: [],
      in_s3_list: [],
      model_list: [],
      out_s3_list: [],
      port_list: [],
      parameter_list: [],
      imageOptions: [],
      productOptions: [],
      mainNode: { "pod_num": 1 },
      slaveNodeList: [],
      taskVersion: {},
      submitRules: {
        name: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 40, message: "长度在1到40个字符" },
        ],
        desc: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 200, message: "长度在1到200个字符" },
        ],
        mainImage: [
          { required: true, validator: mainImageRule.bind(this, this), trigger: 'change' }
        ],
        mainProduct: [
          { required: true, validator: mainProductRule.bind(this, this), trigger: 'change' }
        ],
        mainCommand: [
          { required: true, validator: mainCommandRule.bind(this, this), trigger: 'change'}
        ],
       
      },
      showSelectDialog: false,
      task_id: this.$route.query.task_id,
      version: this.$route.query.version,
      source_version_id: this.$route.query.source_version_id,
    };
  },
  components: {
    plugDataset,
    plugS3,
    plugModel,
    plugPort,
    plugParameter
  },
  async created() {
    this.getData()
  },
  methods: {
    async setAddForm() {
      this.addForm.fork_from = this.algorithmVersion_id
      this.addForm.node_group_list = []
      this.mainNode.type = 1
      console.log("mainNode", this.mainNode)
      this.mainNode.image_id = this.mainNode.image_group[2]
      this.addForm.node_group_list.push(this.mainNode)
      for (let i = 0; i < this.slaveNodeList.length; i++) {
        this.slaveNodeList[i].type = 2
        this.slaveNodeList[i].image_id = this.slaveNodeList[i].image_group[2]
        this.addForm.node_group_list.push(this.slaveNodeList[i])
      }
      this.addForm.s3_list = []
      for (let i = 0; i < this.in_s3_list.length; i++) {
        this.in_s3_list[i].type = 0
        this.addForm.s3_list.push(this.in_s3_list[i])
      }
      for (let i = 0; i < this.out_s3_list.length; i++) {
        this.out_s3_list[i].type = 1
        this.addForm.s3_list.push(this.out_s3_list[i])
      }
      this.addForm.port_list = []
      for (let i = 0; i < this.port_list.length; i++) {
        this.addForm.port_list.push(this.port_list[i])
      }
      this.addForm.dataset_list = []
      for (let i = 0; i < this.dataset_list.length; i++) {
        this.addForm.dataset_list.push(this.dataset_list[i])
      }
      this.addForm.model_list = []
      for (let i = 0; i < this.model_list.length; i++) {
        this.addForm.model_list.push(this.model_list[i])
      }
      this.addForm.parameter_list = []
      for (let i = 0; i < this.parameter_list.length; i++) {
        this.addForm.parameter_list.push(this.parameter_list[i])
      }
    },

    async getAddForm(data) {
      console.log("data",data)
      this.addForm.name = data.name
      this.addForm.desc = data.desc 
      this.port_list = []
      this.slaveNodeList = []
      this.in_s3_list = []
      this.out_s3_list = []
      this.model_list = []
      this.dataset_list = []
      this.parameter_list = []
      for (let node of data.node_group_list) {
        if (node.type == 1) {
          this.mainNode = node
          let res = await getImageDetail({ id: this.mainNode.image_id })
          let mainImage = res.data
          this.mainNode.visibility = mainImage.visibility
          this.mainNode.engine = mainImage.engine
          console.log("image_group",[mainImage.visibility.toString(),mainImage.engine.toString(),mainImage.id])
          this.mainNode.image_group = [mainImage.visibility.toString(),mainImage.engine.toString(),mainImage.id]
          this.mainNode.image_id = mainImage.id
          
        } else {
          let res = await getImageDetail({ id: node.image_id })
          let slaveImage = res.data
          let slaveNode = node
          slaveNode.image_id = slaveImage.id
          slaveNode.image_group = [slaveImage.visibility.toString(),slaveImage.engine.toString(),slaveImage.id]
          this.slaveNodeList.push(slaveNode)
        }
      }
      if (data.s3_list.length > 0){
        for (let s3 of data.s3_list) {
          if (s3.type == 0) {
            this.in_s3_list.push(s3)
          }
          else {
            this.out_s3_list.push(s3)
          }
        }
      }
      console.log("s31", this.out_s3_list)
      console.log("s32", this.in_s3_list)
      if (data.port_list) {
        this.port_list = data.port_list
      }
      if (data.model_list) {
        this.model_list = data.model_list
      }
      if (data.dataset_list) {
        this.dataset_list = data.dataset_list
      }
      if (data.parameter_list) {
        this.parameter_list = data.parameter_list
      }
      console.log("port_list", this.port_list)
      if(this.dataset_list.length > 0
        ||this.in_s3_list.length > 0
        ||this.out_s3_list.length > 0
        ||this.model_list.length > 0
        ||this.parameter_list.length > 0
        ||this.port_list.length > 0){
          this.advanced = true
        }
      this.$forceUpdate()
    },
    async getData() {
      
      let res =await getTaskVersionDetail({id: this.source_version_id})
      console.log("res",res)
      if( res && res.data){
        this.getAddForm(res.data)
      }
      this.addForm.copy_from =  this.source_version_id
      this.addForm.version = this.version
      this.addForm.task_id = this.task_id
      this.getProductList()
      this.getAllImageGroups()
    },
    done() {
      this.showSelectDialog = false
      let query = {
        id: this.addForm.id,
      }
      this.$router.push({
        path: '/task/code',
        query
      })
    },

    addSlaveNode() {
      let data = { pod_num: 1 }
      this.slaveNodeList.push(data)
      this.changeSlaveEngine(data.visibility, data.engine, this.slaveNodeList.length - 1)
    },
    setAdvanced() {
      this.advanced = !this.advanced
    },
    delSlaveNode(i) {
      this.slaveNodeList.splice(i, 1)
    },
    infoDataset(datasets) {
      datasets.forEach(e => { e.dataset_id = e.id })
      this.dataset_list = datasets
      console.log('infoDataset', this.dataset_list)
    },
    infoInS3(s3s) {
      this.in_s3_list = s3s
      console.log('infoInS3', this.in_s3_list)
    },
    infoOutS3(s3s) {
      this.out_s3_list = s3s
      console.log('infoOutS3', this.out_s3_list)
    },
    infoModel(models) {
      models.forEach(e => { e.model_version_id = e.id })
      this.model_list = models
      console.log('infoModel', this.model_list)
    },
    infoPort(ports) {
      this.port_list = ports
      console.log('infoPort', this.port_list)
    },
    infoParameter(parameter) {
      this.parameter_list = parameter
      console.log('infoParameter', this.parameter_list)
    },
    async getProductList() {
      let res = await getAllProducts()
      this.productOptions = res.data
    },
    async getAllImageGroups() {
      let res = await getAllImageGroups()
      this.imageOptions = res.data
    },
    async getTaskVersions(task_id) {
      let ret = await getAllTaskVersions({ taskId: task_id})
      if (ret.data.length > 0) {
        this.taskVersion = ret.data[0]
      }
    },
    async startTask() {
      await startTaskVersion({ id: this.taskVersion.id });
      this.toDetail()
    },
    toDetail() {
      let query = {
        id: this.addForm.task_id,
        source_version_id: this.taskVersion.id
      }
      this.$router.push({
        path: '/task/code',
        query
      })
    },
    upStep() {
      this.active = 1
    },
    addTaskOrVersion() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
            this.setAddForm()
            let res = await addTaskVersion({ ...this.addForm });
            this.taskVersion = res.data
        }
        if (this.active ==1){
          this.active = 2
        }
        console.log("active", this.active)
        if(this.active ==9){
          this.toDetail()
        }
      })
    },
    succeedOver(data) {
      console.log(data)
    },
    async submmit() {
      this.active = 3
    },

  },

}
</script>
<style lang="less" scoped>
@import "~@/assets/css/detail-add.less";
</style>